<script setup>

</script>

<template>
 <div id="taiji">
		<div id="yin"></div>
		<div id="yang"></div>
	</div>
</template>

<style>
#taiji {
			width: 200px;
			height: 200px;
			background-color: black;
			border-radius: 50%;
			position: relative;
		}
		#yin, #yang {
			width: 100px;
			height: 100px;
			background-color: white;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
		}
		#yin {
			left: 50%;
			transform: translate(-50%, -50%);
		}
		#yin:before {
			content: '';
			display: block;
			width: 60px;
			height: 60px;
			background-color: black;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		#yang:before {
			content: '';
			display: block;
			width: 60px;
			height: 60px;
			background-color: white;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		#yin:after {
			content: '';
			display: block;
			width: 25px;
			height: 25px;
			background-color: black;
			border-radius: 50%;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}
		#yang:after {
			content: '';
			display: block;
			width: 25px;
			height: 25px;
			background-color: white;
			border-radius: 50%;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}
</style>